<template>
  <div class="employment-notice">
    <el-card class="notice-card">
      <div slot="header" class="clearfix">
        <span>入职通知书</span>
      </div>
      
      <div class="notice-content">
        <div class="header-section">
          <h2 class="title">入职通知书</h2>
          <p class="candidate-name">{{ formData.candidateName }} 先生/女士：</p>
        </div>
        
        <div class="content-section">
          <p>您好！</p>
          
          <p>非常高兴地通知您，公司已决定录用您至 <strong>{{ formData.departmentName }}</strong> 部门任 <strong>{{ formData.position }}</strong> 岗位。</p>
          
          <p>根据公司相关规定，您的薪酬及福利标准如下：</p>
          <ul>
            <li>试用期薪酬（税前）：¥{{ formData.probationSalary }}</li>
            <li>转正薪酬（税前）：¥{{ formData.regularSalary }}</li>
          </ul>
          
          <p><strong>报到信息：</strong></p>
          <ul>
            <li>报到日期：{{ formData.reportDate }}</li>
            <li>报到地址：{{ formData.reportAddress }}</li>
            <li>联系人：{{ formData.contactPerson }}</li>
            <li>联系电话：{{ formData.contactPhone }}</li>
          </ul>
          
          <p><strong>入职须知：</strong></p>
          <p>为了您顺利地完成入职手续的办理，您还需提前准备如下资料并在入职当天提交：</p>
          <ol>
            <li>两寸彩色照片一张；</li>
            <li>离职证明；</li>
            <li>身份证、学位证书复印件1份（身份证复印件2份）；</li>
            <li>户口簿【首页+本人页】复印件1份；</li>
            <li>工商银行卡【发放工资用】；</li>
            <li>员工自备笔记本电脑。研发人员自备笔记本要求8G内存，SSD硬盘，如需公司配备请提前告知；</li>
            <li>医院体检报告。</li>
          </ol>
          
          <p class="warning">
            请您务必在 {{ formData.reportDate }} 前来报到，逾期未报到的，该offer将自动失效。
          </p>
          
          <p>如有任何疑问，请及时与我们联系。</p>
          
          <p>期待您的加入！</p>
          
          <div class="signature-section">
            <p>{{ formData.companyName }}</p>
            <p>{{ formData.sendDate }}</p>
          </div>
        </div>
      </div>
      
      <div class="button-section">
        <el-button type="primary" @click="onPrint">打印</el-button>
        <el-button @click="onExport">导出PDF</el-button>
        <el-button @click="onCancel">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 表单数据
const formData = reactive({
  candidateName: '候选人姓名',
  departmentName: '部门名称',
  position: '岗位名称',
  probationSalary: '5000',
  regularSalary: '8000',
  reportDate: '2023年10月01日',
  reportAddress: '北京市朝阳区xxx路xxx号',
  contactPerson: '人力资源部',
  contactPhone: '010-12345678',
  companyName: '公司名称',
  sendDate: new Date().toLocaleDateString()
})

// 打印功能
const onPrint = () => {
  window.print()
}

// 导出PDF功能
const onExport = () => {
  // 这里可以实现导出PDF的逻辑
  console.log('导出PDF')
}

// 返回功能
const onCancel = () => {
  // 返回上一页或关闭页面的逻辑
  console.log('返回')
}
</script>

<style scoped>
.employment-notice {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.notice-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.candidate-name {
  font-size: 16px;
  margin-bottom: 20px;
}

.content-section {
  line-height: 1.8;
}

.content-section p {
  margin: 10px 0;
}

.content-section ul,
.content-section ol {
  margin: 10px 0;
  padding-left: 20px;
}

.warning {
  color: #f56c6c;
  font-weight: bold;
  margin: 20px 0;
}

.signature-section {
  margin-top: 40px;
  text-align: right;
}

.button-section {
  margin-top: 30px;
  text-align: center;
}

@media print {
  .button-section {
    display: none;
  }
}
</style>